<template>
  <el-tabs v-model="activeTab" class="configtab">
    <el-tab-pane label="基础" name="base">
      <el-form size="small" label-position="top" ref="form" :model="component.bsChartInfo">
        <el-form-item label="内容">
          <el-input v-model="component.bsChartInfo.wordInfoJSON.word"></el-input>
          <p style="font-size: 10px; line-height: 1.6; margin: 0; color: #999">
            (1）YYYY-MM-DD HH:mm:ss >>输出当前时间<br/>
            (2）xx(无锡)天气 >> 输出xx(无锡)天气
            </p>
        </el-form-item>
        <el-form-item label="宽度">
          <el-input v-model="component.bsChartInfo.width"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="component.bsChartInfo.height"></el-input>
        </el-form-item>
        <el-form-item label="X轴坐标">
          <el-input v-model="component.bsChartInfo.x"></el-input>
        </el-form-item>
        <el-form-item label="Y轴坐标">
          <el-input v-model="component.bsChartInfo.y"></el-input>
        </el-form-item>
        <el-form-item label="字号">
          <el-input v-model="component.bsChartInfo.wordInfoJSON.css.fontSize"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="component.bsChartInfo.wordInfoJSON.css.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="刷新频率">
          <el-input v-model="component.bsChartInfo.refreshTime"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="danger" @click="remove">删除组件</el-button>
          <el-button type="primary" @click="submit">保存更改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import echarts from 'echarts'
import Services from '@/services'
import { mapMutations } from 'vuex'
export default {
  name: 'WordConfig',
  props: {
    component: Object,
    datasource: Array,
  },
  data(){
    return{
      activeTab: 'base',
    }
  },
  methods: {
    ...mapMutations({
      CHARTS_UPDATE: 'charts/UPDATE'
    }),
    remove(){
      this.$emit('remove', this.component.bsChartInfo.id)
    },
    submit(){
      this.$emit("saveConfig", this.component.bsChartInfo.id)
    },
    formateWordInfo(){
      let wordInfo = JSON.stringify(this.component.bsChartInfo.wordInfoJSON)
      return wordInfo
    },
  },
  watch: {
    component: {
      handler(n, o) {
        console.log(this.component)
        let newWordInfo = this.formateWordInfo()
        let componentClone = Object.assign({}, this.component)
        if(newWordInfo){
          componentClone.bsChartInfo.wordInfo = newWordInfo
          this.CHARTS_UPDATE(componentClone)
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="less">
.sys-zhou{
  .el-form-item__content{
    display: flex;
    .el-color-picker{
      margin-left: 10px;
    }
  }
}
</style>

